<template>
  <div class="bottom-area">
    <div class="groups">
      <div class="item" v-for="(tool, index) in bottomTools" :key="index">
        <router-link :to="tool.path">
          <div class="icon">
            <i :class="['iconfont', tool.icon]"></i>
          </div>
          <div class="text">{{ tool.text }}</div>
        </router-link>
      </div>
      <div class="item">
        <el-popover
          placement="top"
          trigger="hover"
          popper-style="background-color: transparent;color: #fff;"
        >
          <template #reference>
            <div class="icon">
              <i class="iconfont icon-chizi"></i>
            </div>
          </template>
          <template #default>
            <div class="measureIcons" style="display: flex; justify-content: space-around">
              <div class="mesureIcon" v-for="(icon, index) in measureIcons" :key="index">
                <router-link :to="`/measure/${icon.path}`">
                  <i :class="['iconfont', icon.icon]"></i>
                </router-link>
              </div>
            </div>
          </template>
        </el-popover>
        <div class="last-item">测量距离</div>
      </div>
    </div>
  </div>
</template>

<script setup>
const bottomTools = [
  {
    icon: 'icon-ditu_diqiu_o',
    text: '自转',
    path: '/rotate',
  },
  {
    icon: 'icon-kongzhitai_',
    text: '控制台',
    path: '/plot',
  },
  {
    icon: 'icon-feiji',
    text: '城市视图',
    path: '/cityview',
  },
  {
    icon: 'icon-fangdajing',
    text: '查询',
    path: '/search',
  },
  {
    icon: 'icon-qiaoliang',
    text: '桥梁',
    path: '/bridge',
  },
]
const measureIcons = [
  {
    icon: 'icon--_zhexian',
    path: 'line',
  },
  {
    icon: 'icon-xingzhuang-juxing',
    path: 'rect',
  },
  {
    icon: 'icon-duobianxing',
    path: 'polygon',
  },
  {
    icon: 'icon-yuanxingweixuanzhong',
    path: 'circle',
  },
]
</script>

<style lang="scss" scoped>
.bottom-area {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 900;
  color: #fff;
  width: 100vw;
  height: 70px;
  background-image: url('/bcg-image/xzd-header.png');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  transform: rotateZ(180deg);
  .groups {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      margin-left: 5px;
      a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 50px;
        font-size: 12px;
      }
      .icon {
        width: 35px;
        height: 35px;
        border-radius: 50%;
        background-color: rgb(0, 0, 147, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 5px;
      }
 
      .last-item {
        font-size: 12px;
      }
    }
    transform: rotateZ(180deg);
  }
}
</style>

